<template>
	<view class="mainpadding" v-if="pageShow">
		<u-popup :show="fwshow" @close="fwclose">
			<view class="mainpadding">
				<view class="sanshier xiaohei textcenter fonweight">服务门店</view>
				<view class="guanbi" @click="fwclose">
					<u-icon name="close" size="18"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<view class="mainpadding2s flexbetween margin_top" @click="employee_text=item.FullName;employee_id=item.REC" :class="item.REC==employee_id?'qianhov1':'qianhov'" v-for="item in dyList" :key="item.REC">
						<view class="" style="width: 90%;">
							<view class="flexleft">
								<view class="touxiang margin_right2">
									<image :src="item.avatar_text" mode=""></image>
									<!-- <image src="@/static/image/system/ydddyf.png" mode=""></image> -->
								</view>
								<view class="">
									<view class="xiaohei sanshier fonweight">{{item.FullName}}</view>
									<view class="xiaohui strongtext margin_top2">职位：{{item.Duty || "暂无"}}</view>
								</view>
							</view>
						</view>
						<view class="">
							<u-icon name="checkmark-circle-fill" v-if="employee_id==item.REC" color="#F99740" size="22"></u-icon>
							<u-icon name="checkmark-circle-fill" v-if="employee_id!=item.REC"  color="#999" size="22"></u-icon>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="bigbtn margin_top">确认</view> -->
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 130rpx;">
			<!-- 评价 -->
			<view class="radius mainpadding ffffff">
				<view class="ershiba xiaohei fonweight">您对服务人员满意吗？</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohei">服务门店</view>
					<view class="strongtext xiaohui">{{dataAll.posinfo.PosName}}</view>
				</view>
				<view class="flexbetween margin_top" @click="fwshow = true">
					<view class="ershiba xiaohei">服务人员</view>
					<view class="flexright">
						<view class="strongtext xiaohui margin_right1">{{employee_text?employee_text:"全体店员"}}</view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexcenter sanshis" @click="my_status=3">
						<view class="flexcenter wxzpj">
							<view class="bumicon margin_right1">
								<image src="../static/image/system/bmy.png" v-if="my_status!=3" mode=""></image>
								<image src="../static/image/system/bmyi.png" v-if="my_status==3" mode=""></image>
							</view>
							<view class="strongtext xiaohui">不满意</view>
						</view>
					</view>
					<view class="flexcenter sanshis" @click="my_status=2">
						<view class="flexcenter wxzpj">
							<view class="bumicon margin_right1">
								<image src="../static/image/system/yb.png" v-if="my_status!=2" mode=""></image>
								<image src="../static/image/system/yby.png" v-if="my_status==2" mode=""></image>
							</view>
							<view class="strongtext xiaohui">一般</view>
						</view>
					</view>
					<view class="flexcenter sanshis" @click="my_status=1">
						<view class="flexcenter wxzpj">
							<view class="bumicon margin_right1">
								<image src="../static/image/system/myw.png" v-if="my_status!=1" mode=""></image>
								<image src="../static/image/system/my.png" v-if="my_status==1" mode=""></image>
							</view>
							<view class="strongtext xiaohui">满意</view>
						</view>
					</view>
				</view>
				<view class="flextops margin_top">
					<view class="strongtext xiaohei margin_right2">文字评价</view>
					<textarea class="textarea" placeholder="请输入" v-model="content"></textarea>
				</view>
			</view>
			<!--  -->
			<view class="mainpadding ffffff margin_top" v-for="(ite,inde) in dataAll.goodslist" :key="inde">
				<view class="ershiba xiaohei fonweight">您对商品满意吗？</view>
				<view class="flexbetween margin_top">
					<view class="shili">
						<image :src="ite.goodsinfo.image_text" mode=""></image>
					</view>
					<view class="" style="width: 66%;">
						<view class="titletext fonweight yhxk">{{ite.goodsinfo.FullName}}</view>
						<view class="flexbetween margin_top5">
							<view class=" strongtext xiaohei ">数量
								<text class="strongtext xiaohei fonweight">*{{Number(ite.Qty)}}</text>
							</view>
							<view class=" strongtext xiaohong ">成本补贴价
								<text class="sanshier xiaohong fonweight">￥{{Number(ite.total)}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flexleft margin_top">
					<view class="strongtext xiaohei margin_right2">疗效</view>
					<u-rate :count="5" v-model="ite.lxmy_starnum"></u-rate>
					<!-- <view class="strongtext xiaohui">非常满意</view> -->
				</view>
				<view class="flexleft margin_top">
					<view class="strongtext xiaohei margin_right2">价格</view>
					<u-rate :count="5" v-model="ite.pricemy_starnum"></u-rate>
					<!-- <view class="strongtext xiaohui ">一般</view> -->
				</view>
				<view class=" margin_top">
					<view class="xiahuaxian">
						<view class="strongtext xiaohei">添加图片({{ite.images_text.length}}/6)</view>
					</view>
					<view class="flexleft flex_wrap" style="width: 100%;">
						<view class="flexcenter margin_top" style="width: 16.6%;" v-for="(item,index) in ite.images_text">
							<view class="shantp dingwei">
								<image :src="item" mode=""></image>
								<view class="shanchu" @click="delindex(index,ite.images,ite.images_text)"></view>
							</view>
						</view>
						<view class="flexcenter margin_top" style="width: 16.6%;"  @click="uploadImg(6,ite.images,ite.images_text)" v-if="ite.images.length<6">
							<view class="huibox">
								<view class="shangctp"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="flextops margin_top">
					<view class="strongtext xiaohei margin_right2">文字评价</view>
					<textarea class="textarea" placeholder="请输入" v-model="ite.content"></textarea>
				</view>
			</view>
			<view class="flexleft margin_top" @click="is_nm = is_nm?0:1">
				<view class="margin_right1">
					<u-icon name="checkmark-circle-fill" v-if="is_nm" color="#EB6529" size="22"></u-icon>
					<u-icon name="checkmark-circle-fill" v-if="!is_nm" color="#999" size="22"></u-icon>
				</view>
				<view class="strongtext xiaohei margin_right2">匿名发布</view>
			</view>
		</view>

		<!-- 固定底部 -->
		<view class="mainpadding ffffff gudingdb">
			<view class="bighbtn" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				is_nm:0,
				fwshow: false, //服务门店
				listid: "",
				dataAll: {},
				pageShow: false,
				employee_id: "",
				employee_text: "",
				my_status:1,//1=满意,2=一般,3=不满意
				dyList:[],
				content:"",
				datatype:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.datatype = options.datatype
			this.getDetail()
		},
		methods: {
			submit(){
				uni.showLoading({
					title:"请稍后",
					mask:true,
				})
				if(this.content==""){
					httpRequest.toast("请对门店做出文字评价")
					return false
				}
				let goodsComment = []
				for(let i=0;i<this.dataAll.goodslist.length;i++){
					let item = this.dataAll.goodslist[i]
					if(item.lxmy_starnum==0){
						console.log(item,"当前数据");
						httpRequest.toast("请对"+item.goodsinfo.FullName+"的疗效打分")
						return false
					}
					if(item.pricemy_starnum==0){
						httpRequest.toast("请对"+item.goodsinfo.FullName+"的价格打分")
						return false
					}
					if(item.content==""){
						httpRequest.toast("请对"+item.goodsinfo.FullName+"做出文字评价")
						return false
					}
					goodsComment.push({
						lxmy_starnum:item.lxmy_starnum,
						pricemy_starnum:item.pricemy_starnum,
						images:item.images.join(),
						video_url:"",
						content:item.content,
						ptype_id:item.goodsinfo.Rec,
					})
				}
				httpRequest.request('/api/goodscl/addComment', 'POST', {
					BillID:this.listid,
					datatype:this.datatype,
					is_nm:this.is_nm,
					shopComment:{
						employee_id:this.employee_id?this.employee_id:-1,
						my_status:this.my_status,
						content:this.content
					},
					goodsComment,
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						}, 1000);
					}
					
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			getDetail() {
				httpRequest.request('/api/goodscl/myOrderDetail', 'GET', {
					BillID: this.listid,
					datatype:this.datatype
				}).then(res => {
					res.data.goodslist.forEach(item => {
						this.$set(item, "lxmy_starnum", 0)
						this.$set(item, "pricemy_starnum", 0)
						this.$set(item, "images", [])
						this.$set(item, "images_text", [])
						this.$set(item, "content", "")
					})
					this.dataAll = res.data
					this.pageShow = true
					this.getlist()
				})
			},
			getlist(){
				httpRequest.request('/api/goodscl/employeeIndex', 'GET', {
					Posid: this.dataAll.Posid
				}).then(res => {
					this.dyList = res.data
				})
			},
			fwclose() {
				this.fwshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.touxiang {
		width: 90rpx;
		height: 120rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;

		image {
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			width: 100%;
			height: 100%;
		}
	}

	.guanbi {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.qianhov {
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.qianhov1 {
		border: 1rpx solid #EE6F2D;
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.weixz {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}

	.textarea {
		height: 80rpx;
		font-size: 24rpx;
		width: 70%;
	}

	.shangctp {
		width: 26rpx;
		height: 26rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/shangchuantp.png');
	}

	.huibox {
		width: 90rpx;
		height: 90rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.shanchu {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/shanchu1.png');
	}

	.shantp {
		width: 90rpx;
		height: 90rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shili {
		width: 144rpx;
		height: 144rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.bumicon {
		width: 36rpx;
		height: 36rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wxzpj {
		background: #F2F2F2;
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		width: 141rpx;
		height: 58rpx;
	}
</style>